<template>
  <div class="box">
    <div class="item-1">
      <div class="item2"></div>
      <div class="item2"></div>
      <div class="item2"></div>
    </div>
    <div class="item-2"></div>
    <div class="item-3"></div>

    <div>{{name}}</div>
    <div>{{number}}</div>
  </div>
</template>

<script>
export default {
  name: "FlexDemo",
  data() {
    return {
      name: "", // 用户名
      number: "" // 学号
    };
  },
  created() {
    console.log(this.$route.params); // 查看一下前一个页面通过路由传递过来的参数

    this.name = this.$route.params.name;
    this.number = this.$route.params.number;
  }
};
</script>

<style>
.box {
  display: flex;
  height: 400px;
  background: rgb(65, 5, 230);
  justify-content: center; /**水平居中 */
  align-items: center; /**垂直居中 */
}

.item-1 {
  display: flex;
  width: 100x;
  height: 100px;
  background: rgb(92, 102, 247);
  margin: 20px;
}

.item-2 {
  width: 100px;
  height: 100px;
  background: rgb(92, 102, 247);
  margin: 20px;
}

.item-3 {
  display: flex;
  width: 100px;
  height: 100px;
  background: rgb(92, 102, 247);
  margin: 20px;
}

.item2 {
  width: 40px;
  height: 20px;
  background: rgb(15, 30, 245);
  margin: 5px;
}
</style>